<template>
  <uni-nav-bar :title="fillOr.name" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package_sale" v-if="fillOr">
    <view class="space-between">
      <view>加注机</view>
      <view>{{fillOr.name}}</view>
    </view>
    <view class="space-between" style="margin-top:10rpx;">
      <view>当前存量</view>
      <view>{{fillOr.count}}</view>
    </view>
  </view>
  <scroll-view scroll-y="true" enable-back-to-top @scrolltolower="loadMore" class="scroll-box"
    :style="{ height: pageHeight + 'px'}">
    <view class="package_sale" style="padding: 0px 20rpx;margin-top:0px">
      <view class="lists" v-for="item in orderLists" :key='item.id'>
        <view class="space-between">
          <view>{{item.memo}}</view>
          <view>{{item.amount}}</view>
        </view>
        <view class="space-between" style="margin-top:5rpx;">
          <view>{{item.createtime}}</view>
          <view>{{item.driver_name}}</view>
        </view>
      </view>
    </view>
  </scroll-view>
</template>

<script setup lang="ts">
  import { navBack } from '@/utils/navigator';
  import { showLoading } from '@/utils/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { getFillInfo, getFillaccountLog } from '@/gql/rehydrator';
  import { toPublish } from '@mqtt';
  import { ref } from 'vue';
  /**
   * 加注机详情页面
   * @param {Number} pageHeight 列表高度
   * @param {Number} lastPage 总页数
   * @param {Number} currentPage 当前页数
   * @param {Array} orderLists 加注订单列表
   * @param {Number} filId 加注机ID
   * @param {Object} fillOr 加注机详细信息
   */
  const pageHeight = ref()

  const isLoading = ref(false);
  const lastPage = ref(1);
  const currentPage = ref(1);
  const orderLists = ref([]);

  const filId = ref()
  const fillOr = ref({})
  onLoad((pearm) => {
    uni.getSystemInfo({
      success: function (res) {
        pageHeight.value = res.windowHeight - 140;
      },
    });
    filId.value = pearm.id
    init()
    fillAll()
  })
  function fillAll() {
    showLoading('加载中');
    const payload = {
      query: getFillInfo,
      variables: { fill_id: filId.value.toString() },
    };
    toPublish(
      'ql/delivery/getFillInfo',
      payload,
      (obj : any) => {
        const { getFillInfo } = obj.data;
        fillOr.value = getFillInfo
      },
    );
  }
  function init() {
    isLoading.value = true;
    const payload = {
      query: getFillaccountLog,
      variables: {
        page: currentPage.value,
        fill_id: Number(filId.value)
      },
    };
    toPublish(
      'ql/delivery/getFillaccountLog',
      payload,
      (obj : any) => {
        const { getFillaccountLog } = obj.data;
        isLoading.value = false;
        orderLists.value = [...orderLists.value, ...getFillaccountLog.list];
        lastPage.value = getFillaccountLog.lastpage;
      }
    );
  }
  /**
   * 加载更多
   */
  function loadMore() {
    if (currentPage.value < lastPage.value) {
      currentPage.value++;
      init();
    }
  }
</script>

<style scoped lang="less">
  .lists {
    width: 100%;
    padding: 20rpx 0px;
    border-bottom: 1px solid #eee;
  }
</style>